<template>
	<view class="root">
		<view class="header">
			<text>忘记密码</text>
		</view>

		<!-- 手机号输入 -->
		<view class="input">
			<up-icon name="phone-fill" color="#41BC78" size="46rpx"></up-icon>
			<input type="number" v-model="phone" @input="onPhoneInput" placeholder="请输入手机号" />
		</view>
		<view class="err_tips" v-if="phoneTips !== ''">{{phoneTips}}</view>
		<view style="height:26rpx;"></view>

		<!-- 验证码输入 -->
		<view class="codeInput">
			<input type="number" v-model="code" placeholder="请输入验证码" />
			<view class="line"></view>
			<view class="tips">
				<up-code ref="uCode" keep-running @change="codeChange" start-text="获取验证码"></up-code>
				<text @tap="getCode" :text="tips" class="u-page__code-text">{{tips}}</text>
			</view>
		</view>

		<!-- 新密码输入 -->
		<view class="input">
			<up-icon name="lock-fill" color="#41BC78" size="46rpx"></up-icon>
			<input type="password" v-model="passWord" @input="onPwdInput" placeholder="请输入新密码" />
		</view>
		<view class="err_tips" v-if="pwdTips !== ''">{{pwdTips}}</view>

		<!-- 提交按钮 -->
		<view class="btn" @click="submit">
			<text>确定</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { test,toast } from '@/node_modules/uview-plus';
import { get_code, reset_password } from '@/api/index.js'; // 假设有发送验证码和重置密码接口

// 表单状态
const phone = ref('');
const phoneTips = ref('');

const code = ref('');
const codeTips = ref('');

const passWord = ref('');
const pwdTips = ref('');

// 验证规则
const pwdReg = /^[a-zA-Z0-9!@#$%^&*()_+]{8,20}$/;

// 验证手机号输入
const onPhoneInput = () => {
	phoneTips.value = test.mobile(phone.value) ? '' : '手机号格式不正确';
};

// 验证密码输入
const onPwdInput = () => {
	pwdTips.value = pwdReg.test(passWord.value) ? '' : '密码格式不正确（8-20位字母/数字/特殊字符）';
};

// 验证码逻辑
let tips = ref('');
let uCode = ref();
const codeChange = (text) => {
	tips.value = text;
};

const getCode = () => {
	if (uCode.value.canGetCode) {
		if (!test.mobile(phone.value)) {
			toast('请先输入正确手机号');
			return;
		}
		get_code({ target: phone.value, type: 'phone' })
			.then(res => {
				toast('验证码已发送');
				uCode.value.start();
			})
			.catch(err => {
				toast(err.message || '发送验证码失败');
			});
	} else {
		toast('倒计时结束后再发送');
	}
};

// 提交重置密码
const submit = () => {
	if (!test.mobile(phone.value)) {
		toast('手机号格式不正确');
		return;
	}
	if (!pwdReg.test(passWord.value)) {
		toast('密码格式不正确');
		return;
	}
	if (!code.value) {
		toast('请输入验证码');
		return;
	}

	// 调用后端接口
	reset_password({
		phone: phone.value,
		newPassword: passWord.value,
		captcha: code.value
	}).then(res => {
		if(res.code === 200) {
			toast(res.message);
			setTimeout(() => {
				uni.navigateBack(); // 返回登录页
			}, 1500)
		}
	})
};
</script>

<style lang="less" scoped>
.root{
	min-height: 100vh;
	background-color: #fff;
	.header{
		padding-top: 221rpx;
		padding-left: 65rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 63rpx;
		color: #000000;
		letter-spacing: 4rpx;
		margin-bottom: 77rpx;
	}
	.input{
		width: 666rpx;
		margin: 0 auto 37rpx auto;
		position: relative;
		:deep(.u-icon__icon){
			position: absolute;
			right: 42rpx;
			top: 0;
			bottom: 0;
		}
		input{
			width: 100%;
			height: 123rpx;
			background-color: #F5F5F5;
			border-radius: 35rpx;
			padding-left: 35rpx;
			padding-right: 100rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			border: 4rpx solid #F5F5F5;
			transition: .3s;
		}
		input:hover,input:focus{
			border: 4rpx solid #E72222;
		}
	}
	.codeInput{
		width: 666rpx;
		height: 129rpx;
		background-color: #F5F5F5;
		border-radius: 35rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 21rpx 40rpx 33rpx;
		box-sizing: border-box;
		margin: 0 auto 37rpx auto;
		column-gap: 16rpx;
		transition: .3s;
		border: 4rpx solid #F5F5F5;
		input{
			flex: 1;
			height: 100%;
			box-sizing: border-box;
		}
		.line{
			width: 4rpx;
			height: 53rpx;
			background-color: #979797;
		}
		.tips{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 25rpx;
			color: #149A50;
			letter-spacing: 2rpx;
		}
	}
	.codeInput:hover,.codeInput:focus{
		border: 4rpx solid #E72222;
	}
	.btn{
		width: 457rpx;
		margin: 72rpx auto 0 auto;
		background: #035A36;
		border-radius: 42rpx;
		text-align: center;
		padding: 21rpx 21rpx 19rpx 21rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		letter-spacing: 4rpx;
	}
}

.err_tips {
		padding-left: 44rpx;
		font-size: 24rpx;
		color: #E72222;
		margin: 8rpx 0;
	}
</style>